<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <table class="container-content"></table>
        <div class="container-end">
            <div class="end-content">
                <div class="end-top">游戏结束!</div>
                <div class="end-container">
                    <span class="end-container-color"></span> 胜
                </div>
                <div class="end-bottom">
                    <div class="end-bottom-container">是否要重新开一局?</div>
                    <span class="end-yes">确定</span>
                    <span class="end-no">取消</span>
                </div>
            </div>
        </div>    
    </div>
    <div class="panel">
        <div class="controls">
            <select id="game-select">
                <option value="pvp">双人对战</option>
                <option value="pve">人机对战</option>
            </select>
            <button id="start-btn">开始游戏</button>
            <select id="color-select" disabled>
                <option value="black">执黑先行</option>
                <option value="white">执白后行</option>
            </select>
            <button id="save-btn">保存游戏</button>
            <button id="load-btn">加载游戏</button>
        </div>
        <div id="status" class="status">请选择执棋颜色并开始游戏</div>
        <div id="timer" class="timer"></div>
        <div class="game-info">
            <p><strong>游戏规则：</strong></p>
            <p>· 无禁手规则</p>
            <p>· 横、竖、斜先连成五子者胜</p>
        </div>
    </div>
    <!-- 添加ECharts CDN -->
    <script src="./js/echarts.js"></script>
    
    <!-- 添加统计图表容器 -->
    <div class="stats-container">
        <div id="chess-count-chart" style="width: 300px;height:300px;"></div>
        <div id="win-rate-chart" style="width: 300px;height:300px;"></div>
    </div>

    <script src="./js/index.js"></script>
</body>

</html>